<template>
	<view>
		<view class="select_title u-padding-20" @click="show = true">
			<input v-model="time" disabled class="dis_inl_blo va_m u-margin-right-20" type="text" placeholder="请选择时间段">
			<!-- <u-button class="dis_inl_blo va_m" size="mini" type="success" @click="show = true">打开</u-button> -->
		</view>
		
		<u-calendar v-model="show" :mode="mode" @change="change">
			<view slot="tooltip">
				<view class="top_title">
					请选择开始/结束时间
				</view>
			</view>
		</u-calendar>
		<u-empty :show="showEmpty" text="暂无数据" mode="list">
		</u-empty>
		<view class="s_list u-padding-20 margin_auto" v-for="(item,index) in orderlist" @click="messagedetail(item.id)">
			<view class="list_top u-rela">
				<text style="left:0;" class="u-abso">订单号：{{item.code}}</text>
				<!-- <text class="u-abso pos_center status_con"></text> -->
				<!-- <text class="u-abso status_con" style="right:0;" >{{item.status_label}}</text> -->
				<view class="u-abso pos_right" v-if="item.status==0">
					<text style="color:#007AFF;">{{item.status_label}}</text>
				</view>
				<view class="u-abso pos_right" v-if="item.status==1">
					<text style="color:#18B566;">{{item.status_label}}</text>
				</view>
				<view class="u-abso pos_right" v-if="item.status==2">
					<text style="color:#18B566;">{{item.status_label}}</text>
				</view>
				<view class="u-abso pos_right" v-if="item.status==-1">
					<text style="color:#ff5500;">{{item.status_label}}</text>
				</view>
			</view>
			<view class='list_bottom u-rela u-padding-top-20'>
				<image class="img_head va_m" :src="item.images[0]"></image>
				<view class="list_intro dis_inl_blo va_m">
					<view class="list_content">{{item.content}}</view>
					<view>业主：{{item.name}}</view>
					<view>报修类型：{{item.type}}</view>
					<view>
						<u-icon class="u-margin-right-10" name="calendar"></u-icon>
						<text>{{item.time}}</text>
					</view>
					<view class="address_con">
						<u-icon class="u-margin-right-10" name="map"></u-icon>
						{{item.house}}</view>
				</view>
				<view v-if="item.status==0" class="list_btn dis_inl_blo u-abso pos_right pos_up_center"  @click.stop="grabbingRepair(item.id)">抢单</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyRepair
	} from "@/service/repairService.js";
	export default {
		data () {
			return {
				orderlist: [],
				showEmpty: false,
				
				show: false,
				mode: 'range',
				time:'',
				startDate:'',
				endDate:''
			}
		},
		onLoad() {
			this.dateFormat();
			// console.log(this.dateFormat());
			getMyRepair({
				start:this.startDate,
				end:this.endDate
			}).then(this.getMyRepair);
		},
		methods:{
			getMyRepair(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					this.orderlist = e.result;
				} else if(e.code == 400) {
					this.showEmpty = true;
					this.orderlist = [];
				}
			},
			messagedetail:function(id){
				uni.navigateTo({
					url:'../index/orderDetail?id='+id
				})
			},
			change(e) {
				// console.log(e);
				this.time=e.startDate+'-'+e.endDate;
				this.startDate=e.startDate+' '+'00:00:00';
				this.endDate=e.endDate+' '+'24:00:00';;
				getMyRepair({
					start:e.startDate+' '+'00:00:00',
					end:e.endDate+' '+'24:00:00'
				}).then(this.getMyRepair)
			},
			dateFormat() {
				let date = new Date(new Date().toISOString());
				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				this.startDate= year + "-" + month + "-" + day + " " +  "00:00:00" ;
				this.endDate= year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}
		}
	}
</script>

<style lang="scss">
	.u-empty.data-v-3d842a77 {
		margin-top:120rpx !important;
	}
	.select_title{
	
		background-color: #0c838b;
	}
	.select_title input{
		width:97%;
		height:50rpx;
		padding:0 10rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.top_title{
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
	.s_list{
		width:95%;
		border-radius: 20rpx;
		margin-top:20rpx;
		box-shadow: 0 0 10rpx #ccc;
	}
	.list_top{
		height:80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #ccc;
	}
	.list_content,.address_con{
		width:100%;
		height:45rpx;
		display:block;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow:ellipsis;
	}
	.status_con{
		width:100rpx;
		color:#007AFF;
	}
	.img_head{
		width:150rpx;
		height: 200rpx;
		margin-right:20rpx;
		overflow: hidden;
		border:1rpx solid #ddd;
	}
	.list_intro{
		width:73%;
	}
	.list_intro view{
		color:#666;
		padding:5rpx 0;
	}
	.list_btn{
		width:100rpx;
		height:100rpx;
		color:#fff;
		text-align: center;
		line-height: 100rpx;
		font-size: 35rpx;
		border-radius: 50%;
		background-color: #006971;
	}
	.list_btn1{
		background-color: #18B566;
	}
	.no_list{
		border-bottom:1rpx solid #ddd;
		padding:3rpx 10rpx;
		font-size: 22rpx;
		color:#999;
		border-radius: 10rpx;
	}
</style>

